<template>
  <div class="home">
    <header>记录</header>
    <span class="allDelete" @click="allDelete">全部删除</span>
    <div class="card">
      <el-card
        :body-style="{ padding: '0px',width:'300px' }"
        v-for="(item,index) in dataList"
        :key="index"
      >
        <img src="@/assets/删除.png" class="delete" @click="deleteHandle(index)" alt />
        <img :src="item.src" class="image" />
        <div style="padding: 14px">
          <span>{{item.content}}</span>
          <div class="bottom">
            <time class="time">{{ item.date }}</time>
          </div>
        </div>
      </el-card>
      <el-card :body-style="{ padding: '0px',width:'300px' }">
        <img src="@/assets/add.png" class="image" @click="showHandle" />
        <div style="padding: 14px">
          <span>{{content}}</span>
          <div class="bottom">
            <time class="time">{{ currentDate }}</time>
          </div>
        </div>
      </el-card>
    </div>

    <el-dialog v-model="isShow" title="描绘" width="30%" :before-close="handleClose">
      <el-form ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-from-item label="选择图片" class="upload">
          <input type="file" id="filed" @change="filePreview" />
          <p @click="selectImg()">
            <img :src="src" alt="Tips（在页面不刷新的情况下，不能连续选择两张及以上相同的图片）" />
          </p>
        </el-from-item>
        <el-form-item label="内容" prop="content">
          <el-input v-model="ruleForm.content" style="width:80%" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="saveHandle">保存</el-button>
          <el-button @click="cancelHandle">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      currentDate: "",
      isShow: false,
      ruleForm: {
        content: ""
      },
      src: "",
      textHide: true,
      dataList: [
        {
          src:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F53%2F0a%2Fda%2F530adad966630fce548cd408237ff200.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640955506&t=08a39e17ff1f0e35a62a524c824debc8",
          content: "今天吃饱了",
          date: new Date()
        }
      ]
    };
  },
  methods: {
    showHandle() {
      this.isShow = true;
    },
    selectImg: function() {
      document.getElementById("filed").click();
    },

    filePreview(e) {
      let _this = this;
      var files = e.target.files[0];
      if (!e || !window.FileReader) return; // 判断是否支持FileReader
      let reader = new FileReader();
      reader.readAsDataURL(files); // 文件转换
      reader.onloadend = function() {
        _this.src = this.result;
        _this.textHide = false;
      };
    },
    // 点击全部删除
    allDelete() {
      this.dataList = [];
      localStorage.setItem("dataList", JSON.stringify(this.dataList));
    },
    // 点击删除
    deleteHandle(i) {
      this.dataList.splice(i, 1);
      localStorage.setItem("dataList", JSON.stringify(this.dataList));
    },
    // 点击保存
    saveHandle() {
      const list = {
        src: this.src,
        content: this.ruleForm.content,
        date: new Date()
      };
      this.dataList.push(list);
      localStorage.setItem("dataList", JSON.stringify(this.dataList));
      this.isShow = false;
      this.src = "";
      this.ruleForm = {};
      this.getLocalList();
    },
    // 点击取消按钮，隐藏提示框
    cancelHandle() {
      this.isShow = false;
    },
    // 获取localStorage中的数据
    getLocalList() {
      this.dataList = JSON.parse(localStorage.getItem("dataList"))
        ? JSON.parse(localStorage.getItem("dataList"))
        : this.dataList;
    }
  },
  created() {
    this.getLocalList();
  }
};
</script>
<style scoped lang="less">
.home {
  padding: 10px;
  position: relative;
  .allDelete {
    position: absolute;
    top: 20px;
    right: 50px;
    text-decoration: none;
    color: red;
    cursor: pointer;
  }
  header {
    display: flex;
    justify-content: center;
    font-size: 30px;
    font-weight: 600;
  }
  .card {
    display: flex;
    flex-wrap: wrap;
  }
  .el-card {
    width: 300px;
    margin: 10px;
    position: relative;
    .delete {
      position: absolute;
      width: 30px;
      right: 0;
      opacity: 0.3;
      height: 30px;
    }
    .image {
      display: flex;
      justify-content: center;
      width: 100%;
      height: 300px;
    }
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .time {
      font-size: 13px;
      color: #999;
    }
  }
  img {
    width: 300px;
    height: 300px;
  }
  .upload {
    text-align: center;
  }
  .el-form-item__label {
    float: right;
  }
}
</style>
